<template>
  <div class="person_box">
    <!-- 左侧菜单 -->
    <el-row class="box_left">
      <el-col>
        <el-menu
          text-color="#fff"
          background-color="#363B40"
          active-text-color="#3EAF7C"
          :default-active="this.$router.currentRoute.path"
          unique-opened
          router
        >
          <!-- 头像、姓名展示 -->
          <el-menu-item>
            <el-row slot="title">
              <el-col :span="4">
                <el-avatar
                  size="medium"
                  :src="authUser.user.avatar"
                ></el-avatar>
              </el-col>
              <el-col :span="4">
                <el-button disabled type="text">{{
                  authUser.user.nickname
                }}</el-button>
              </el-col>
            </el-row>
          </el-menu-item>

          <!-- 个人中心 -->
          <el-menu-item index="/back/person">
            <i class="el-icon-user"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>

          <!-- 我的发布 -->
          <el-submenu index="/back/published">
            <template slot="title">
              <i class="el-icon-folder-checked"></i>
              <span>我的发布</span>
            </template>
            <el-menu-item index="/back/published/mygood">
              <span>二手商品</span>
            </el-menu-item>
            <el-menu-item index="/back/published/myroom">
              <span>房屋出租</span>
            </el-menu-item>
          </el-submenu>

          <!-- 订单管理 -->
          <el-submenu index="/back/record">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">我是买家</span>
              <el-menu-item index="/back/record/buygood">
                <span>二手商品</span>
              </el-menu-item>
              <el-menu-item index="/back/record/buyroom">
                <span>房屋出租</span>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <span slot="title">我是卖家</span>
              <el-menu-item index="/back/record/soldgood">
                <span>二手商品</span>
              </el-menu-item>
              <el-menu-item index="/back/record/soldroom">
                <span>房屋出租</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <!-- 审核管理 -->
          <el-submenu index="/back/examine" v-if="isAdmin">
            <template slot="title">
              <i class="el-icon-coordinate"></i>
              <span>审核管理</span>
            </template>
            <el-menu-item index="/back/examine/examuser">
              <span>新用户审核</span>
            </el-menu-item>
            <el-menu-item index="/back/examine/examgood">
              <span>新物品审核</span>
            </el-menu-item>
            <el-menu-item index="/back/examine/examroom">
              <span>新房屋审核</span>
            </el-menu-item>
          </el-submenu>
          <!-- 用户管理 -->
          <el-menu-item index="/back/role" v-if="isSuperAdmin">
            <i class="el-icon-s-tools"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 右侧展示区 -->
    <el-row class="box_right">
      <el-col :span="2" :offset="22" class="view_head">
        <el-button type="text" @click="goHome">主页</el-button>
        <el-button type="text" @click="logout">退出登录</el-button>
      </el-col>
      <!-- <CustomLine margin="9px 0" border="1px dashed grey" /> -->
      <el-col>
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Back",
  computed: {
    // 获取数据
    authUser() {
      return this.$store.state.userModule.user;
    },
    isAdmin() {
      return (
        this.authUser.roleList.indexOf("superadmin") != -1 ||
        this.authUser.roleList.indexOf("admin") != -1
      );
    },
    isSuperAdmin() {
      return this.authUser.roleList.indexOf("superadmin") != -1;
    },
  },

  methods: {
    goHome() {
      this.$router.push({ name: "good" });
    },
    logout() {
      sessionStorage.clear();
      this.$router.push({ name: "login" });
    },
  },
};
</script>

<style scoped>
.person_box {
  height: 100%;
  display: flex;
}

.box_left {
  width: 20%;
  background-color: #363b40;
}

.avatar_nickname {
  margin-right: 10px;
}

.box_right {
  width: 80%;
}

.view_head {
  display: flex;
  justify-content: center;
}
</style>